<template>
  <!-- :class="[isModify && 'warning']" -->
  <el-input :value="value" type="number" :disabled='disabled' :placeholder="placeholder" @input="handleInput($event)" @mousewheel.native.prevent />
</template>

<script>
export default {
  name: 'LimitInput',
  model: {
    prop: 'val',
    event: 'change',
  },
  props: {
    val: {
      type: [String, Number],
      default: '',
    },
    int: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isModify: false,
      value: '',
    };
  },
  watch: {
    val: {
      handler(val) {
        this.value = val;
      },
      immediate: true,
    },
  },
  methods: {
    handleInput($event) {
      if (!this.isModify) {
        this.isModify = true;
      }
      let v = String($event);
      v = v.replace(/[^\d.]/gi, '');
      console.log(v);
      const re = /([0-9]+\.[0-9]{2})[0-9]*/;
      const re1 = /[^\d]/g;
      if (!this.int) {
        this.value = v.replace(re, '$1') || '';
      } else {
        this.value = v.replace(re1, '');
      }
      this.$emit('change', this.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.warning {
  ::v-deep .el-input__inner {
    color: #e6a23c;
  }
}
</style>
